<template>
  <div class="container grids">
    <div class="item">
      <div class="title">1.教学目的与要求</div>
      <el-input v-model="info.instructionalObjective" :autosize="{ minRows: 12}" type="textarea" placeholder="请输入教学目的与要求" />
    </div>
    <div class="item">
      <div class="title">2.教学重点</div>
      <el-input v-model="info.teachingFocus" :autosize="{ minRows: 12 }" type="textarea" placeholder="请输入教学重点" />
    </div>
    <div class="item">
      <div class="title">3.教学难点</div>
      <el-input v-model="info.teachingDifficulties" :autosize="{ minRows: 12 }" type="textarea" placeholder="请输入教学难点" />
    </div>
    <div class="item">
      <div class="title">3.执行后记</div>
      <el-input v-model="info.executionAfterword" :autosize="{ minRows: 12}" type="textarea" placeholder="请输入执行后记" />
    </div>
  </div>

  <div class="flex justifyCenter justifyEnd actions">
    <el-button type="primary" @click="save" :loading="loading">保存</el-button>
  </div>
</template>

<script setup lang="ts">
let props = defineProps(["archivesId"]);
const { proxy } = getCurrentInstance();

let info = ref({});
let loading = ref(false);

onMounted(() => {
  getInfo();
});

async function save() {
  try {
    loading.value = true;
    info.value["archivesId"] = props.archivesId;
    await proxy.$apis.scheduleRelevant({
      type: "archives-teaching-save",
      data: info.value,
    });
    proxy.$utils.showToast("保存成功");
    getInfo();
  } catch (error) {
  } finally {
    loading.value = false;
  }
}

async function getInfo() {
  let resp = await proxy.$apis.scheduleRelevant({
    type: "archives-teaching-details",
    data: { archivesId: props.archivesId },
  });
  if (resp) info.value = resp;
  console.log("教学目的", info.value);
}
</script>



<style lang="scss" scoped>
.container {
  gap: 0 25px; //上下间距 左右间距
  .item {
    .title {
      text-align: center;
      margin-bottom: 20px;
    }
  }
  .actions {
    margin-top: 15px;
  }
}
</style>

